<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>登录-后台管理系统</title>
    <link href="/static/favicon.ico" rel="shortcut icon">
    <link href="/static/plugin??font-awesome-4.7.0/css/font-awesome.min.css,bootstrap/css/bootstrap.min.css,bootstrap-validator/css/bootstrapValidator.css,bootstrap-fileinput/css/fileinput.min.css"  rel="stylesheet" type="text/css" />
    <link href="/static/css/main.css" rel="stylesheet" type="text/css" />
    <style>
        .bg{
            width:100%;
            height:100%;
            position:absolute;
            z-index:-9999;
            top:0;
            left:0;
            overflow:hidden;
        }
        .bg img{
            width:auto;
            height: 100%;
        }
        #content{
            margin-top: 25%;
        }
        #loginBox{
            background: rgba(255, 255, 255, 0.8);
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            position: relative;
        }

        #logo{
            position: absolute;
            bottom:100%;
            margin-bottom: 10px;
            width: 100%;
            left: 0px;
            text-align: center;
            text-decoration: none;
        }

        #logo .logo-img {
            height: 65px;
            cursor: pointer;
        }

        #logo .logo-font {
            height: auto;
            width: 100px;

        }

        #captcha-img,#captcha-img  + i.fa-refresh {
            cursor: pointer;
        }
        @media (max-width: 767px){
            #loginBox{
                margin-right: 8.33333333%;
            }
        }


    </style>
</head>
<body ondragstart="return false">
<div class="bg" >
    <img src="/static/admin/img/loginbg.jpg"/>
</div>
<div id="mainBody" class="container">
    <div id="content" class="row" >
        <div id="loginBox" class="col-lg-3 col-sm-4  col-xs-10 pull-right pt10">
            <a id="logo" href="/">
                <img class="logo-img" src="/static/admin/img/logo.png">
                <img class="logo-font" src="/static/admin/img/logo_font.png">
            </a>
            <form id="loginForm"  class="form-horizontal" action="/login" method="post">
                <div class="text-center ms-form-title mb10">用户登录</div>
                <div class="form-group">
                    <label for="account" class="col-md-12 ">账户:</label>
                    <div class="col-md-12">
                        <input class="form-control" id="account" name="account"
                               placeholder="用户名/邮箱">
                    </div>
                </div>

                <div class="form-group">
                    <label for="password" class="col-md-12">密码:</label>
                    <div class="col-md-12">
                        <input type="password" class="form-control" id="password" name="password" placeholder="密码">
                    </div>
                </div>
                <div class="form-group">
                    <label for="verify" class="col-md-12">验证码:</label>
                    <div class="col-md-12">
                        <input class="form-control" id="verify" name="verify" style="width: 50%;display: inline-block" placeholder="验证码">
                        <img id="captcha-img" src="/captcha.jpg?p=login" title="点击换一张验证码" style="display: inline-block;height: 100%;padding-right: 6px">
                        <i class="fa fa-refresh fa-spin" title="点击换一张验证码"></i>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-12">
                        <button type="button" id="login-btn"  class="btn  btn-info center-block btn-submit" style="width: 100%">登    录</button>
                    </div>
                </div>
            </form>
        </div>
        <div class="col-lg-9 col-sm-8 col-xs-12">
            <!--告示等-->
        </div>
    </div>

</div>
<script src="/static/plugin/??jquery/jquery-2.1.4.min.js,bootstrap/js/bootstrap.min.js,bootstrap-validator/js/bootstrapValidator.js,bootstrap-validator/js/language/zh_CN.js,layer/layer.js" type="text/javascript" ></script>
<script src="/static/js/main.js" type="text/javascript"></script>
<script>
    $(document).ready(function () {

        $('.bg').css("min-height",($('body')[0].clientHeight));
        $('body').height($('body')[0].clientHeight);
        var loginFormV = $("#loginForm").bootstrapValidator({
            live:'disabled',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                account: {
                    validators: {
                        notEmpty: {
                            message: '请输入要账号或验证的邮箱'
                        },
                        regexp: {
                            regexp: /^[_A-z0-9]{4,30}$|^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
                            message: '用户名要是英文字母,数字,下划线_,长度4至30位,邮箱'
                        }
                    }
                },
                password: {
                    validators: {
                        notEmpty: {},
                        stringLength: {
                            min: 6,
                            max: 30
                        }
                    }
                },
                verify:{
                    validators: {
                        notEmpty: {},
                        stringLength: {
                            min: 4,
                            max: 4,
                            message:'验证长度为4位'
                        }
                    }
                }
            }
        });
        validateFieldOnline("#loginForm","verify","/captcha-verify?p=login",{
            validReturnValue:true,
            message:"验证码错误",
            method:"post",
            live:false
        });
        $("#login-btn").click(login);
        $("#captcha-img,#captcha-img  + i.fa-refresh").click(function () {
            refreshVerifyCode("#captcha-img","login");
            loginFormV.bootstrapValidator('resetField', "verify");
        });

    });
    function  login() {
        ajaxSubmitForm("#loginForm",{
            url:ctx+"/login",
            closeMask:false,
            subsuccess:function(data) {
                successTipBox("登录成功",function () {
                    window.location.href=ctx;
                });
            },
            suberror(data){
                errorTipBox(data.msg);
                refreshVerifyCode("#captcha-img","login");
            }
        })
    }
    formAutoSubmit("#loginForm",login);
</script>
</body>
</html>
